<template>
  <div class="modelManagement-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="12">
        <el-button icon="el-icon-plus" type="primary" @click="handleEdit">新增</el-button>
        <el-button type="primary" @click="handleEditCategory" :disabled="signle">设置分类</el-button>
      </vab-query-form-left-panel>
      <vab-query-form-right-panel :span="12">
        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
          <el-form-item>
            <el-input v-model.trim="queryForm.modelName" placeholder="模型名称" clearable style="width: 150px" />
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-right-panel>
    </vab-query-form>

    <el-table
      border
      ref="list"
      v-loading="listLoading"
      :data="list"
      :element-loading-text="elementLoadingText"
      @row-click="handleRowClick"
      @selection-change="handleSelectionChange"
    >
      <el-table-column align="center" min-width="50" type="selection"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="100" prop="key" label="模型编码"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="200" prop="name" label="模型名称"></el-table-column>
      <el-table-column align="center" width="100" prop="status" label="发布状态">
        <template #default="{ row }">
          <el-tag v-if="row.deploymentId" type="success">已发布</el-tag>
          <el-tag v-else>草稿</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" width="100" prop="status" label="状态">
        <template #default="{ row }">
          <el-tag v-if="row.processSuspended" type="danger">挂起</el-tag>
          <el-tag v-else type="success">激活</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" width="100" prop="version" label="流程版本">
        <template #default="{ row }">
          <el-tag v-if="row.version">V:{{ row.version }}</el-tag>
          <span v-else></span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip align="center" width="100" prop="categoryName" label="分类"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" width="100" prop="defValue" label="是否首选">
        <template #default="{ row }">
          <el-tag v-if="row.defValue == 1" type="primary">是</el-tag>
          <el-tag v-else type="danger">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="160" prop="createTime" label="创建时间"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="160" prop="lastUpdateTime" label="最后更新时间"></el-table-column>
      <el-table-column align="center" label="操作" width="250">
        <template #default="{ row }">
          <el-tooltip effect="dark" content="设计" placement="top">
            <el-button type="primary" size="mini" circle @click="handleDesign(row)"><vab-icon :icon="['fas', 'network-wired']"></vab-icon></el-button>
          </el-tooltip>
          <el-tooltip effect="dark" content="发布" placement="top">
            <el-button type="primary" size="mini" circle @click="handlePublish(row)"><vab-icon :icon="['fas', 'bezier-curve']"></vab-icon></el-button>
          </el-tooltip>
          <!-- <el-tooltip effect="dark" content="撤销" placement="top">
            <el-button type="primary" size="mini" circle @click="handleRepeal(row)"><vab-icon :icon="['fas', 'bezier-curve']"></vab-icon></el-button>
          </el-tooltip> -->
          <el-tooltip effect="dark" content="挂起" placement="top">
            <el-button type="primary" size="mini" circle @click="handleSuspend(row)" v-if="row.deploymentId && !row.processSuspended">
              <vab-icon :icon="['fas', 'pause']"></vab-icon>
            </el-button>
          </el-tooltip>
          <el-tooltip effect="dark" content="激活" placement="top">
            <el-button type="primary" size="mini" circle @click="handleActivate(row)" v-if="row.deploymentId && row.processSuspended">
              <vab-icon :icon="['fas', 'play']"></vab-icon>
            </el-button>
          </el-tooltip>
          <!-- <el-tooltip effect="dark" content="查看图片" placement="top">
            <el-button type="primary" size="mini" circle @click="handleImage(row)"><vab-icon :icon="['fas', 'file-image']"></vab-icon></el-button>
          </el-tooltip> -->
          <el-tooltip effect="dark" content="删除" placement="top">
            <el-button icon="el-icon-delete" type="danger" size="mini" circle @click="handleDelete(row)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :current-page="queryForm.pageNum"
      :page-size="queryForm.pageSize"
      :layout="layout"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>
    <edit ref="edit" @fetch-data="fetchData"></edit>
    <model-design ref="modelDesign" @fetch-data="fetchData"></model-design>
    <model-image ref="modelImage" @fetch-data="fetchData"></model-image>
    <model-category ref="modelCategory" @fetch-data="fetchData"></model-category>
  </div>
</template>

<script>
  import { getList, doDelete, doPublish, doSuspendOrActivate } from '@/api/workflow/model'
  import Edit from './components/Edit'
  import ModelDesign from './components/Design'
  import ModelImage from './components/Image'
  import ModelCategory from './components/Category'

  export default {
    name: 'Modeler',
    components: { Edit, ModelDesign, ModelImage, ModelCategory },
    data() {
      return {
        list: null,
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        elementLoadingText: '正在加载...',
        queryForm: {
          pageNum: 1,
          pageSize: 10,
          modelName: undefined,
        },
        selection: undefined,
        signle: true,
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      handleSelectionChange(selection) {
        this.selection = selection[0]
        this.signle = selection.length != 1
      },
      handleRowClick(row) {
        this.$refs['list'].toggleRowSelection(row)
      },
      handleEditCategory() {
        this.$refs['modelCategory'].showEdit(this.selection)
      },
      handleActivate(row) {
        if (row) {
          this.$baseConfirm('确定要激活当前流程吗？', null, async () => {
            await doSuspendOrActivate(row).then((res) => this.callbackFun(res))
          })
        } else {
          this.$baseMessage('未选中任何行', 'error')
          return false
        }
      },
      handleSuspend(row) {
        if (row) {
          this.$baseConfirm('确定要挂起当前流程吗？挂起后将导致相关流程实例无法进行！', null, async () => {
            await doSuspendOrActivate(row).then((res) => this.callbackFun(res))
          })
        } else {
          this.$baseMessage('未选中任何行', 'error')
          return false
        }
      },
      handleRepeal(row) {
        this.$baseMessage('撤销', 'error')
      },
      handleDelete(row) {
        if (row) {
          this.$baseConfirm('确定删除该流程吗?删除流程会级联删除已经存在的实例与历史数据，且不可恢复，请谨慎操作!', null, async () => {
            await doDelete(row.id).then((res) => this.callbackFun(res))
          })
        } else {
          this.$baseMessage('未选中任何行', 'error')
          return false
        }
      },
      handlePublish(row) {
        if (row) {
          if (row.categoryName) {
            this.$baseConfirm('确定要发布当前流程吗？', null, async () => {
              await doPublish(row).then((res) => this.callbackFun(res))
            })
          } else {
            this.$baseMessage('请设置分类', 'error')
          }
        } else {
          this.$baseMessage('未选中任何行', 'error')
          return false
        }
      },
      callbackFun(res) {
        if (res.success) {
          this.$baseMessage(res.msg, 'success')
          this.fetchData()
        } else {
          this.$baseMessage(res.msg, 'error')
        }
      },
      handleDesign(row) {
        this.$refs['modelDesign'].showEdit(row)
      },
      handleImage(row) {
        this.$refs['modelImage'].showEdit(row)
      },
      handleEdit(row) {
        if (row.modelId) {
          this.$refs['edit'].showEdit(row)
        } else {
          this.$refs['edit'].showEdit()
        }
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNum = val
        this.fetchData()
      },
      queryData() {
        this.queryForm.pageNum = 1
        this.fetchData()
      },
      async fetchData() {
        this.listLoading = true
        const { data } = await getList(this.queryForm)
        this.list = data.list
        this.total = data.total
        setTimeout(() => {
          this.listLoading = false
        }, 300)
      },
    },
  }
</script>
